<template>
  <div class="root">
      <div class="header">
        <div class="son">
          <a href="javascript:;" @click="goShare" :class="{border:id==1}">共享题库</a>
          <a href="javascript:;" @click="goMyQues" :class="{border:id==2}">我的题库</a>
        </div>
      </div>
      <div class="body">
        <router-view></router-view>
      </div>
  </div>
</template>

<style scoped lang="less">
*{
  box-sizing: border-box;
}
.border{
  border-bottom: 5px solid red;
  background-color: #fff !important;
}
.header{
  width: 100%;
  height: 50px;
  overflow: hidden;
  background-color: rgb(226, 235, 235) !important;
  border-radius: 5px;
  box-shadow: 1px 1px 5px 2px gray;
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position:sticky;
  top: 10px;
  left: 0px;
  .son {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: #fff;
    a {
     display: inline-block;
     text-decoration: none;
     height: 90%;
     padding: 0px 100px;
     color: black;
     background-color: rgb(131, 130, 130);
    }
  }
}
.body {
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: 1px solid #fff;
  box-shadow: 1px 1px 5px 3px grey;
}
</style>

<script>
export default {
    name:'shareQuestions',
    data() {
      return {
        id:1
      }
    },
    methods: {
      goShare(){
        this.id=1;
        this.$router.push({
          name:'shareQues'
        })
      },
      goMyQues(){
        this.id=2;
        this.$router.push({
          name:'myQues'
        })
      }
    },
}
</script>

